<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <div>
          <el-table
            border
            :data="tableData"
            class="tb-edit"
            style="width: 100%"
            highlight-current-row
          >
            <el-table-column label="项目名称">
              <template scope="scope">
                <span>{{ scope.row.item }}</span>
              </template>
            </el-table-column>

            // 动态循环表头数据
            <el-table-column
              :label="item.val"
              v-for="(item, index) in tableHead"
              :key="index"
            >
              <template scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row[item.item]"
                  placeholder="0"
                  type="number"
                  @change="handleEdit(scope.$index, scope.row, item.item)"
                ></el-input>
                <span>{{ scope.row[item.item] }}</span>
              </template>
            </el-table-column>

            <el-table-column label="总分" prop="total"> </el-table-column>
          </el-table>
        </div>
      </el-main>
      <el-footer> <el-button type="primary">提交</el-button></el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      //  表头数据
      tableHead: [
        { val: "指标1", item: "target1" },
        { val: "指标2", item: "target2" },
        { val: "指标3", item: "target3" },
        { val: "指标4", item: "target4" },
        { val: "指标5", item: "target5" },
      ],
      // 表格数据
      tableData: [
        {
          item: "项目1",
          target1: 0,
          target2: 0,
          target3: 0,
          target4: 0,
          target5: 0,
          total: 0,
        },
        {
          item: "项目2",
          target1: 1,
          target2: 0,
          target3: 0,
          target4: 0,
          target5: 0,
          total: 0,
        },
        {
          item: "项目3",
          target1: 2,
          target2: 0,
          target3: 0,
          target4: 0,
          target5: 0,
          total: 0,
        },
        {
          item: "项目4",
          target1: 3,
          target2: 0,
          target3: 0,
          target4: 0,
          target5: 0,
          total: 0,
        },
        {
          item: "项目5",
          target1: 4,
          target2: 0,
          target3: 0,
          target4: 0,
          target5: 0,
          total: 0,
        },
      ],
    };
  },

  components: {},

  computed: {},

  methods: {
    handleEdit(index, row) {
      var sum = 0;
      this.tableHead.forEach((element) => {
        sum += Number(this.tableData[index][element.item]);
      });
      row.total = sum;
    },
  },
};
</script>
<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  overflow: auto;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.tb-edit .el-input {
  display: none;
}
.tb-edit .current-row .el-input {
  display: block;
}
.tb-edit .current-row .el-input + span {
  display: none;
}
.el-table td,
.el-table th {
  text-align: center !important;
}
</style>
